<template>
  <div class="post-container">
    <el-card
        v-for="post in posts"
        :key="post.id"
        class="mb-6 post-card"
        shadow="hover"
        :style="{ backgroundColor:  '#f1f5f9', border: '1px solid #d1d9e6' }"
    >
      <div class="header">
        <div>
          <div class="type-badge" :class="`type-${post.type}`">{{ typeMap[post.type] }}</div>
          <h3 class="title">{{ post.title }}</h3>
          <small class="author">by {{ post.author }}</small>
        </div>
        <el-dropdown @command="() => deletePost(post.id)" trigger="click">
          <span class="el-dropdown-link">
            <el-icon><More /></el-icon>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item command="delete">删除帖子</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>

      <div class="body">
        <component :is="getPostComponent(post.type)" :post="post" :md="md" />
      </div>

      <div class="actions">
        <div class="left">
          <el-button size="small" text @click="like(post.id)">👍 {{ post.likes }}</el-button>
          <el-button size="small" text @click="share(post.id)">🔗 分享</el-button>
        </div>
        <el-button type="primary" text size="small" @click="toggleComments(post.id)">
          {{ post.showComments ? '收起评论' : '展开评论' }}
        </el-button>
      </div>

      <div v-if="post.showComments">
        <div v-for="comment in post.comments" :key="comment.id" class="comment">
          <p>
            <span v-if="comment.replyTo" class="reply">{{ comment.author }} 回复 {{ comment.replyTo }}：</span>
            <span v-else class="author-name">{{ comment.author }}：</span>
            {{ comment.content }}
          </p>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import {ref} from 'vue'
import {ElMessage} from 'element-plus'
import 'element-plus/es/components/message/style/css'
import {More} from '@element-plus/icons-vue'
import MarkdownIt from 'markdown-it'

// 初始化 MarkdownIt 实例
const md = new MarkdownIt()

const typeMap = {
  normal: '普通',
  markdown: '知识',
  file: '文件',
  vote: '投票'
}

const posts = ref([
  {
    id: 1,
    type: 'normal',
    title: '普通帖子标题',
    author: '小明',
    content: '这是一个普通的帖子内容。',
    likes: 3,
    showComments: false,
    comments: [
      {id: 1, author: '小红', content: '不错哦！'},
      {id: 2, author: '小李', replyTo: '小红', content: '我也觉得~'}
    ]
  },
  {
    id: 2,
    type: 'markdown',
    title: '知识帖子：Markdown 展示',
    author: '知识哥',
    content: '# 一级标题\n**加粗文本**\n- 列表项1\n- 列表项2',
    likes: 5,
    showComments: false,
    comments: []
  },
  {
    id: 3,
    type: 'file',
    title: '文件分享帖',
    author: '文件侠',
    content: '点此下载：[文件.pdf](#)',
    likes: 2,
    showComments: false,
    comments: []
  },
  {
    id: 4,
    type: 'vote',
    title: '投票帖：你喜欢哪种语言？',
    author: '投票君',
    topic: '编程语言选择',
    options: ['JavaScript', 'Python', 'Java', 'Go'],
    votes: [10, 15, 8, 5], // 用来计算投票比例
    hasVoted: false,
    votedOption: '',
    likes: 7,
    showComments: false,
    comments: [
      {id: 1, author: 'A君', content: 'JavaScript +1'}
    ]
  }
])

function getPostComponent(type) {
  switch (type) {
    case 'markdown':
      return MarkdownPost
    case 'file':
      return FilePost
    case 'vote':
      return VotePost
    default:
      return NormalPost
  }
}

function toggleComments(id) {
  const post = posts.value.find(p => p.id === id)
  post.showComments = !post.showComments
}

function deletePost(id) {
  posts.value = posts.value.filter(p => p.id !== id)
}

function like(id) {
  const post = posts.value.find(p => p.id === id)
  post.likes++
}

function share(id) {
  ElMessage.success('已复制链接！帖子ID：' + id)
}
</script>

<script>
// 组件定义
export const NormalPost = {
  props: ['post'],
  template: `
    <div class="content-normal">{{ post.content }}</div>`
}

export const FilePost = {
  props: ['post'],
  template: `<a :href="'#'" class="content-file">{{ post.content }}</a>`
}

export const MarkdownPost = {
  props: ['post', 'md'], // 接收 md 实例
  computed: {
    html() {
      return this.md.render(this.post.content) // 使用传递的 md 实例
    }
  },
  template: `
    <div class="content-markdown" v-html="html"></div>`
}

export const VotePost = {
  props: ['post'],
  methods: {
    vote(option) {
      if (!this.post.hasVoted) {
        this.post.votedOption = option
        this.post.hasVoted = true
      }
    }
  },
  computed: {
    votePercentages() {
      const totalVotes = this.post.votes.reduce((total, votes) => total + votes, 0)
      return this.post.votes.map(votes => (votes / totalVotes) * 100)
    }
  },
  template: `
    <div class="vote">
      <p class="vote-topic">{{ post.topic }}</p>
      <el-button-group>
        <el-button
            v-for="(option, index) in post.options"
            :key="option"
            size="small"
            @click="vote(option)"
            :disabled="post.hasVoted"
        >
          {{ option }}
        </el-button>
      </el-button-group>
      <div v-if="post.hasVoted" class="vote-results">
        <p>投票结果：</p>
        <div
            v-for="(option, index) in post.options"
            :key="index"
            class="vote-result"
            :style="{ width: votePercentages[index] + '%' }"
        >
          {{ option }}: {{ votePercentages[index].toFixed(2) }}%
        </div>
      </div>
      <p v-if="post.hasVoted" class="voted-info">你已投票：{{ post.votedOption }}</p>
    </div>
  `
}
</script>

<style scoped>
.post-container {
  max-width: 700px;
  margin: 0 auto;
}

.post-card {
  border-radius: 16px;
  background: #e9f1f7; /* 更显眼的浅蓝色背景 */
  position: relative;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  border: 1px solid #d1d9e6; /* 显示边框 */
}

.post-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.title {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 4px;
}

.author {
  color: #aaa;
}

.actions {
  display: flex;
  justify-content: space-between;
  margin-top: 16px;
  padding-top: 10px;
}

.comment {
  font-size: 14px;
  margin-bottom: 8px;
  padding: 6px 10px;
  background: #f9f9f9;
  border-radius: 8px;
}

.comment .reply {
  color: #67C23A;
  font-weight: bold;
}

.comment .author-name {
  font-weight: 600;
}

.content-normal {
  font-size: 15px;
  line-height: 1.6;
  color: #333;
}

.content-file {
  color: #67C23A;
  text-decoration: underline;
  cursor: pointer;
}

.content-markdown {
  font-size: 14px;
  line-height: 1.8;
  color: #2c3e50;
}

.vote-topic {
  font-weight: bold;
  color: #303133;
  margin-bottom: 8px;
}

.voted-info {
  color: #67C23A;
  margin-top: 6px;
  font-size: 13px;
}

.vote-results {
  margin-top: 12px;
  font-size: 14px;
}

.vote-result {
  background-color: #409EFF;
  color: white;
  padding: 6px;
  margin-bottom: 6px;
  border-radius: 5px;
}

.type-badge {
  display: inline-block;
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 12px;
  margin-bottom: 6px;
  background-color: #f0f0f0;
  color: #333;
}

.type-normal {
  background-color: #ecf5ff;
  color: #409EFF;
}

.type-markdown {
  background-color: #fdf6ec;
  color: #e6a23c;
}

.type-file {
  background-color: #f0f9eb;
  color: #67C23A;
}

.type-vote {
  background-color: #fef0f0;
  color: #f56c6c;
}
</style>
